<template>
<div class="login" :class="{filter: isLogining}">
  <div class="content">
    <div class="logo"></div>
    <form class="form" autocomplete="off">
      <div class="username-box">
        <icon name="user" :scale="2" style="fill: #fff;"></icon>
        <input type="text" name="username" autocomplete="off" placeholder="请输入用户名" class="username" @click.native="focusHandler">
      </div>
      <div class="password-box">
        <icon name="password" :scale="2.1" style="fill: #fff;"></icon>
        <input type="text" name="password" autocomplete="off" placeholder="请输入密码" class="password" @focus="focusHandler">
      </div>
      <x-button class="login-btn" type="default" action-type="button" @click.native="handleLogin">登录</x-button>
    </form>
  </div>
  <div v-transfer-dom>
    <loading :show="loadingShow" text="登录中" class="loading" style="font-size: 14px;"></loading>
  </div>
</div>
</template>

<script>
import {
  login
} from '@/api/login'
import {
  XInput,
  XButton,
  Group,
  Loading,
  TransferDomDirective as TransferDom
} from 'vux'

export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      loadingShow: false,
      isLogining: false
    }
  },
  directives: {
    TransferDom
  },
  components: {
    XInput,
    XButton,
    Group,
    Loading
  },
  methods: {
    focusHandler(e){
      if(e.target.name="password"){
        e.target.type="password"
      }
      setTimeout(() => {
        e.target.scrollIntoView(false)
      }, 100)
    },
    handleLogin() {
      this.isLogining = true
      this.loadingShow = true
      login()
        .then(res => {
          this.loadingShow = false
          this.$router.push({
            name: 'home'
          })
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  &.filter{
    filter: blur(3px);
    transition: filter 0.8s ease;
  }
  width: 100%;
  min-height:100%;
  background-image: url("../../assets/img/glgs-login-bg.png");
  background-repeat: no-repeat;
  background-size: 100%;
  text-align: center;
  font-family: sans-serif;
  .logo {
      width: 2.2rem;
      height: 2.2rem;
      background-size: cover;
      margin: 1.6rem auto 0;
  }
  .form{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 1.5rem;
    .username-box, .password-box{
      display: flex;
      align-items: center;
      justify-content: center;
      height: 0.6rem;
      width: 4.6rem;
      border-bottom: 1px solid #fff;
      input, input:focus{
        width: 4.2rem;
        padding: 0.2rem;
        background-color: transparent;
        outline:none;
        border: none;
        color: #fff;
        font-size: 0.3rem;

      }
      input{
        &::-webkit-input-placeholder { /* WebKit browsers */
            color:    #fff;
        }
        &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
           color:    #fff;
           opacity:  1;
        }
        &::-moz-placeholder { /* Mozilla Firefox 19+ */
           color:    #fff;
           opacity:  1;
        }
        &:-ms-input-placeholder { /* Internet Explorer 10+ */
           color:    #fff;
        }
      }
    }
    .username-box{
      margin-bottom: 0.6rem;
    }
    .login-btn{
      width: 4.6rem;
      color: #fff;
      background-color: transparent;
      border: 1px solid #fff;
      border-radius: 0.1rem;
      margin-top: 0.72rem;
    }
  }
}
</style>
